<template>
  <main class="main">
    <!-- 右边内容部分 -->
    <div class="main-content">
      <div class="main-left">
        <div class="left-content">
          <!-- 顶部工具类-推荐/关注 -->
          <div class="box">
            <!-- 设置黏性对齐 -->
            <div class="back_page">
              <div class="back_btn" :title="$t('index.back')">
                <div class="back_panel" @click="back">
                  <div class="icon">
                    <i class="el-icon-arrow-left"></i>
                  </div>
                  <div>
                    <div class="set_txt">{{ $t("setting.set_txt") }}</div>
                    <div class="acc">@{{ CurrentUserInfo.account }}</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 设置列表 -->
            <div class="setting_list">
              <!-- 语言设置 -->
              <router-link to="/language">
                <div class="item">
                  <div class="i_txt">{{ $t('setting.set_language') }}</div>
                  <div class="i_icon">
                    <svg viewBox="0 0 24 24">
                      <g>
                        <path
                          d="M14.586 12L7.543 4.96l1.414-1.42L17.414 12l-8.457 8.46-1.414-1.42L14.586 12z"
                        ></path>
                      </g>
                    </svg>
                  </div>
                </div>
              </router-link>
              <!-- 其他 -->
              <div class="item">
                <div class="i_txt">{{ $t('setting.set_others') }}</div>
                <div class="i_icon">
                  <svg viewBox="0 0 24 24">
                    <g>
                      <path
                        d="M14.586 12L7.543 4.96l1.414-1.42L17.414 12l-8.457 8.46-1.414-1.42L14.586 12z"
                      ></path>
                    </g>
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 主页右侧模板 -->
      <MainRight />
    </div>
  </main>
</template>
      <script>
//MainRight
import MainRight from "@/components/MainRight.vue";
//获取统一请求接口
import { updateUserAuth,getReloadUserInfoByUserId } from "@/api";

export default {
  name: "SettingMainContent",
  components: {
    MainRight,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      is_choose: 1,
      CurrentUserInfo: {
        user_id: JSON.parse(localStorage.getItem("user")).user_id,
        account: JSON.parse(localStorage.getItem("user")).username
          ? JSON.parse(localStorage.getItem("user")).username
          : "账号",
        user_headimg: JSON.parse(localStorage.getItem("user")).user_headimg
          ? JSON.parse(localStorage.getItem("user")).user_headimg
          : require("@/assets/img/user.png"),
        user_nickname: JSON.parse(localStorage.getItem("user")).user_nickname,
        auth_id: this.is_choose ? this.is_choose : 0,
        auth_input_limit: 1000,
      },
    };
  },
  mounted() {},
  methods: {
    back() {
      this.$router.go(-1);
    },
    choose1() {
      //个人认证
      this.is_choose = 1;
      this.CurrentUserInfo.auth_input_limit = 1000;
    },
    choose2() {
      //机构认证
      this.is_choose = 2;
      this.CurrentUserInfo.auth_input_limit = 5000;
    },
    //执行认证
    async authHandler() {
      this.CurrentUserInfo.auth_id = this.is_choose;

      let res = await updateUserAuth(this.CurrentUserInfo);

      if (res.state == 200) {
        this.refleshUserInfo();
        this.$message({
          message: res.message,
          type: "success",
        });
      } else {
        this.$message({
          showClose: true,
          message: res.message,
          type: "error",
        });
      }
    },
    //认证成功后重新加载当前用户信息
    async refleshUserInfo() {
      let res = await getReloadUserInfoByUserId(
        this.CurrentUserInfo
      );
      if (res.state == 200) {
        this.$store.commit("user", JSON.stringify(res.data));
      }
    },
  },
};
</script>
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
/* 右侧主内容 */
.main {
  width: 990px;
  min-height: 415px;
  padding: 0 10px;
}

.main-content {
  display: flex;
  justify-content: space-between;
}

/* 内容左侧样式 */
.main-left {
  max-width: 600px;
  background-color: #ffffff;
  border-radius: 5px;
  margin-right: 15px;
}

.left-content {
  display: flex;
  width: 600px;
  min-height: 100%;
}

.box {
  width: 100%;
  min-height: 900px;
}

/* 顶部用户背景及信息 */
.user_bg_panel {
  border-radius: 10px;
  display: flex;
  position: relative;
}

.back_page {
  display: flex;
  position: sticky;
  /* 不要忘了设置 top */
  top: 0;
  padding: 10px 10px;
  background-color: rgba(255, 255, 255, 0.75);
  color: #000;
  z-index: 299;
  margin-bottom: -38px;
  box-shadow: 0px 1px 3px #939393;
}

.back_btn {
  position: relative;
  cursor: pointer;
  display: flex;
  width: 100%;
}

.back_panel {
  display: flex;
  width: 100%;
}

.back_panel .icon {
  line-height: 39px;
  margin-right: 5px;
}

.back_panel .set_txt {
  font-weight: 700;
}

.nickname {
  font-weight: 700;
}

.acc {
  font-size: 13px;
  color: #939393;
  margin-top: 3px;
}

/* 设置列表 */
.setting_list {
  display: flex;
  flex-direction: column;
  margin-top: 38px;
  width: 100%;
}

.item {
  display: flex;
  justify-content: space-between;
}

.item:hover {
  background-color: rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.i_txt {
  padding: 16px 10px;
  color: #000;
  flex: 1;
}

.i_icon {
  width: 20px;
  height: 20px;
  margin-top: 16px;
  fill: #000;
  margin-right: 10px;
}

@media screen and (max-width: 720px) {
  .main {
    width: 100%;
    padding: 0;
    margin-bottom: 52px;
  }
  .main-left {
    width: 100%;
    margin-right: 0px;
    min-width: 390px;
  }

  .left-content {
    width: 100%;
  }

  .user_avatar {
    margin: -35px 20px 0 0;
    padding: 1px;
    width: 60px;
    height: 60px;
  }
  .auth_banner {
    justify-content: center;
    width: 100%;
  }

  .auth_personal,
  .auth_organizaion {
    max-width: 40%;
  }

  .auth_personal {
    margin-right: 20px;
  }
}

@media (max-width: 1050px) {
  .main {
    max-width: 600px;
  }
  .main-right {
    display: none;
    width: auto;
  }
}

@media (max-width: 1300px) {
}
</style>
  